<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object</title>
    
</head>
<body>
    <button id="btnDec"> - </button>
    <span id="count">0</span>
    <button id="btnAdd"> + </button>

    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/redux/5.0.0-alpha.0/redux.js"></script>
    <script>
        // 1.定义 reducer 函数，根据不同的 action 对象 返回不同的新的 state 
        // 两个参数，一个是state 管理的数据；另一个是action，其属性type标记什么情况下想要做什么样的修改
        function reducer(state={count:0},action){
            if(action.type == 'add'){
                return {count: state.count + 1};// 数据不可变原则，跟useState一样，不能修改，只能覆盖。

            }else if(action.type == 'dec'){
                return {count: state.count - 1};
            }
            return state;
        }

        // 2. 传入reducer函数生成一个store实例
        const store = Redux.createStore(reducer)

        // 3. 通过store实例的subscribe方法订阅数据的变化，每次state变化会自动进入回调执行
        store.subscribe(()=>{
            console.log('state发生变更，值为',store.getState())
            //5. 通过store.getState方法获取最新值并写入到视图
            document.getElementById('count').innerText = store.getState().count
        })

        // 4. 通过store实例的dispatch函数提交action更改状态，告诉 reducer 你想怎么改数据
        const addBtn = document.querySelector('#btnAdd')
        addBtn.addEventListener('click',()=>{
            //++
            store.dispatch({
                type:'add'
            })
        })
        const decBtn = document.querySelector('#btnDec')
        decBtn.addEventListener('click',()=>{
            //--
            store.dispatch({
                type:'dec'
            })
        })
        // 5. 使用 store 实例的 getState 方法获取最新的状态数据更新到视图中。
    </script>
</body>
</html>